<template>
  <div class="main">
    <!--    顶部导航条-->
    <navheader></navheader>
    <div class="user_main container-fluid">
      <!--中间主体内容-->
      <!--      上面头像、个人信息-->
      <div class="top_main">
        <div class="row block m-5" >
          <!--        头像-->

          <el-avatar :size="160" style="margin-top: -40px;background-color:white;padding: 6px;border-color: #939aa2;">
            <el-avatar :size="150" :src="this.show_user_img"></el-avatar>
          </el-avatar>
          <!--        个人信息-->
          <div class="pl-3 pt-4">
            <h1>{{this.user_info.user_name}}</h1>
            <div class="row mt-3 ml-2">
              <div class="infoclassfont">{{this.user_info.sex}}</div>
              <div class="ml-2" style="background-color:#3f7e74;width: 3px;height: 28px"></div>
              <div class="infoclassfont pl-2">{{this.user_info.city}}</div>
              <div class="ml-2" style="background-color:#3f7e74;width: 3px;height: 28px"></div>
              <div class="infoclassfont pl-2">{{this.user_info.email}}</div>
              <div class="ml-2" style="background-color:#3f7e74;width: 3px;height: 28px"></div>
              <div class="infoclassfont pl-2">{{this.user_info.birthday}}</div>
              <div class="ml-2" style="background-color:#3f7e74;width: 3px;height: 28px"></div>
              <div class="infoclassfont pl-2" v-if="this.user_info.identity==0">学生</div>
              <div class="infoclassfont pl-2" v-if="this.user_info.identity==1">已毕业的学长学姐</div>
              <div class="infoclassfont pl-2" v-if="this.user_info.identity==2">老师</div>
              <div class="ml-2" style="background-color:#3f7e74;width: 3px;height: 28px"></div>
            </div>
            <div class="infoclassfont pt-3 pl-2">个人介绍：{{this.user_info.profile}}</div>
            <!--      修改资料和添加记录本按钮-->
            <div class="" style="margin-left:810px">
              <div class="btn_attention btn btn-lg" type="btn"@click="dialogFormVisible=true">
                添加记录本
              </div>
              <div class="btn_attention btn btn-lg" type="btn"  @click="change_info()" >
                编辑个人资料
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--            弹窗 添加记录本-->
      <el-dialog title="添 加 记 录 本" :visible.sync="dialogFormVisible" @close="handleClose" >


        <el-form :model="addRecordForm" :before-close="closeDiv" :rules="rules" ref="addRecordForm" label-width="100px" class="addRecordForm" status-icon>


          <el-form-item
              label="记录本标题"
              prop="record_title"
              :label-width="formLabelWidth">
            <el-input v-model="addRecordForm.record_title"
                      show-word-limit
                      type="textarea"
                      maxlength="20"
                      :rows="1"
                      autocomplete="off"
                      placeholder="请输入记录本标题，1-20个字符"
            ></el-input>
          </el-form-item>


          <el-form-item
              label="记录本内容"
              prop="record_content"
              :label-width="formLabelWidth">
            <el-input v-model="addRecordForm.record_content"
                      show-word-limit
                      type="textarea"
                      maxlength="2000"
                      :rows="20"
                      autocomplete="off"
                      placeholder="请输入记录本内容，1-2000个字符"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm()">提 交</el-button>
            <el-button @click="resetForm('addRecordForm')">重 置</el-button>
            <el-button @click="cancel()">取 消</el-button>
          </el-form-item>

        </el-form>

      </el-dialog>

      <!--    下面部分-->
      <div class="row bottom_main mt-3">
<!--        左边内容-->
        <div class="col-md-3">
          <div class="left_main">
            <h5 class="border-bottom p-4 ml-5" style="font-size: 25px;color: black;font-weight: bold">个人成就</h5>
            <ul class="guide_list">
              <li class="pt-3"><i class="fa fa-commenting pr-2 fa-lg" style="color: #8d4353"></i>帖子内容获得{{this.user_info.cnt_post_comment}}次评论</li>
              <li class=""><i class="fa fa-github-alt pr-2 fa-lg" style="color: #3c2151"></i>积分{{this.user_info.credit}}分</li>
              <li class=""><i class="fa fa-user pr-2 fa-lg" style="color: #057a5b"></i>关注{{this.user_info.cnt_attention}}人</li>
              <li class=""><i class="fa fa-paper-plane pr-2 fa-lg" style="color: #0f5da2"></i>粉丝{{this.user_info.cnt_fans}}人</li>
              <li class=""><i class="fa fa-star pr-2 fa-lg" style="color: #e9ca00"></i>已签到{{this.clock_days}}天</li>
            </ul>
          </div>
          <div class="date mt-4">
            <el-calendar
                  style="background-color:rgba(255,255,255,0.9);
                  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
                  border-radius: 5px;">
              <template slot="dateCell" slot-scope="{date, data}">
                {{ data.day.split('-').slice(1).join('-')}}
                <div style="width:100%;" v-for="(item) in clock_info" :key="item">
                  <el-tag type="danger" v-if="(item.clock_time).indexOf(data.day)!=-1">
                    <i class="fa fa-star"></i>
                  </el-tag>
                </div>
              </template>
            </el-calendar>
          </div>
        </div>
<!--        右边-->
        <div class="right_main col-md-9">
          <el-menu router
                   :default-active="$route.path"
                   style="border-radius: 5px;"
                   text-color="#939aa2"
                   active-text-color="#0f5da2"
                   class="el-menu-demo"
                   mode="horizontal"
                   @select="handleSelect">

            <el-menu-item index="/Personal/Person_Note">
              <span class="titlefontclass">记录本</span>
            </el-menu-item>

            <el-menu-item index="/Personal/Person_Post">
              <span class="titlefontclass">帖子</span>
            </el-menu-item>

            <el-menu-item index="/Personal/Person_Idle">
              <span class="titlefontclass">闲置物品</span>
            </el-menu-item>

            <el-menu-item index="/Personal/Person_Attention">
              <span class="titlefontclass">关注</span>
            </el-menu-item>

            <el-submenu  index="/Personal/Person_Comment">

              <template slot="title">
                <span class="titlefontclass">评论</span>
              </template>
              <el-menu-item index="/Personal/Person_Comment/My_Post_Comment">
                <span class="titlefontclass" style="font-size: 16px">我发表的帖子评论</span>
              </el-menu-item>
              <el-menu-item index="/Personal/Person_Comment/My_Idle_Comment">
                <span class="titlefontclass" style="font-size: 16px">我发表的闲置物品评论</span>
              </el-menu-item>

            </el-submenu >

            <el-menu-item index="/Personal/Person_Collect">
              <span class="titlefontclass">收藏</span>
            </el-menu-item>

          </el-menu>
          <!--        具体内容-->
          <div class="right_bottom_main pr-3 pl-2">
            <router-view></router-view>
          </div>
        </div>


      </div>
    </div>
    <!--    底部导航条-->
    <myfooter></myfooter>
  </div>
</template>

<script>
import myfooter from '../../myfooter'
import navheader from '../../navheader'
import {getUser_Basic} from "@/api/User";
import {addRecord} from '@/api/Record'
import {getUserClockData} from '@/api/User'


export default {
  name: "personal_main",
  components:{
    myfooter,
    navheader,

  },
  data() {
    return {
      user_info:{
        user_name:'',
        birthday:'',
        city:'',
        email:'',
        hobby:'',
        profile:'',
        sex:'',
        credit:'',
        identity:'',
        cnt_attention:0,
        cnt_fans:0,
        cnt_post_comment:0,
        img:'',

      },
      show_user_img:'',
      value: new Date(),
    //  弹窗添加记录本相关
      formLabelWidth: '120px',
      dialogFormVisible:false,
      addRecordForm:{
        record_title:'',
        record_content:''
      },
      rules:{
        record_title: [
          { required: true, message: '请输入记录本标题', trigger: 'blur'},
          { min:1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        record_content: [
          { required: true, message: '请输入记录本内容', trigger: 'blur'},
          { min:1, max: 2000, message: '长度在 1 到 2000 个字符', trigger: 'blur'}
        ]},
      //  倒计时时间相关
      year:2024,
      days:0,
      clock_info:[],
      clock_days:0,

    };
  },
  methods:{
    //  添加记录本
    addSave(){

      addRecord({
        // token:window.sessionStorage.getItem('token'),
        addRecordForm:this.addRecordForm
      }).then(res => {
        if(res.data.code===1){
          this.$msg.success("添加成功！")
        }else{
          this.$msg.error("添加失败！");
        }
        this.cancel();
        this.init();

      });
    },
    // 获取当前用户个人信息
    init(){

      getUser_Basic({
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
          this.user_info.user_id = res.data.user_id;
          this.user_info.user_name = res.data.username;
          this.user_info.birthday = res.data.birthday;
          this.user_info.city = res.data.city;
          this.user_info.email = res.data.email;
          this.user_info.hobby = res.data.hobby;
          this.user_info.profile = res.data.profile;
          this.user_info.sex = res.data.sex;
          this.user_info.credit = res.data.credit;
          this.user_info.img = res.data.img;
          this.show_user_img = '/api/storage/user_img/' + this.user_info.img;

          this.user_info.identity = res.data.identity;
          this.user_info.cnt_attention = res.data.cnt_attention;
          this.user_info.cnt_fans = res.data.cnt_fans;
          this.user_info.cnt_post_comment = res.data.cnt_post_comment;
      });

    },
    selectChange_year(event){
      this.year=event.target.value;
      this.getDays();
    },
    //计算倒计时天数  12月24考试
    getDays(){
      var startdate = new Date();  //开始日期，当前日期
      var year = this.year-1; // 选择的年
      var enddate=new Date(`${year}`+'-12-24');
      this.days=parseInt(Math.abs(enddate.getTime() - startdate.getTime()) / 1000 / 60 / 60 / 24);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    //跳转个人信息主页
    change_info(){
      if(this.$router.history.current.path !='/Personal_Info/Person_Basic'){
        this.$router.push({path:'/Personal_Info/Person_Basic'});
      }
    },
    //清空输入框
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //  关闭弹窗
    cancel() {

      this.dialogFormVisible = false
      // 点击取消按钮的时候清除输入框中的内容 清除验证
      //  this.$nextTick获取了节点之后进行操作
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["addRecordForm"].resetFields();
      });

    },
    // 右上角 × 取消按钮
    closeDiv() {
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["addRecordForm"].resetFields();
      });
    },
    handleClose(){
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["addRecordForm"].resetFields();
      });
    },
    //  提交添加
    submitForm() {
      this.$refs["addRecordForm"].validate((valid) => {
        if (valid) {

          //再次确认
          this.$confirm('确认添加?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {

            this.addSave();

          }).catch(() => {
            this.$msg.error("取消添加！");
          });


        } else {
          this.$msg.error("取消添加！");
          return false;
        }
      });
    },
    //获取所有打卡记录
    getAllClockDate(){
      getUserClockData({
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        if(res.data.code==1){
          this.clock_info=res.data.date;
          this.clock_days=res.data.clock_days;
        }
      });

    }



  },
  created() {
    let _this=this;
    _this.getDays();
    _this.init();
    _this.getAllClockDate();

    if(this.$router.history.current.path =='/Personal/Person_Note'){
      this.$router.push({path:'/Personal/Person_Note'});
    }


  }
}
</script>

<style scoped>
.main {
  background: url('~@/assets/user/personal_back.jpeg') no-repeat center;
  background-size:cover;
  width: 100%;
  background-attachment:fixed;
}

.user_main{
  width: 90%;
  /*height: 1500px;*/
  /*line-height: 100px;*/
  /*text-align:center;*/
}
/*上面部分盒子*/
.top_main{
  /*width: 80%;*/
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  height: 260px;
  background-color:rgba(255,255,255,0.85);
  align-items: center;
  margin-top: 150px;
}
/*下面部分盒子*/
.bottom_main {
  border-radius: 5px;
}
/*选项卡的字体*/
.titlefontclass{
  font-size: 20px;
  font-weight: bold;
}
.titlefontclass:hover{
  color: #0f5da2;
}
/*去路由横线*/
a:hover
{
  text-decoration: none;
}
/*选择年份输入框样式设置*/
.yearsfontclass{
  background-color: transparent;
  color: white;
  font-size: 22px;
  font-weight: bold;
}
.left_main{
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  background-color:rgba(255,255,255,0.9);
  /*opacity: 0.5;*/
  height: 350px;
}

.guide_list li{
  font-size: 19px;
  padding-bottom: 20px;
  list-style:none
}
.guide_list li:hover{
  font-size: 20px;
}

.infoclassfont{
  font-size: 20px;
  color: #5b5b5b;
}
.btn_attention{
  border-color:#3f7e74;
  color: #3f7e74;
  font-size: 20px;
  font-weight: bold;
  float:right;
  margin-right: 20px;
}
.btn_attention:hover{
  background-color: #3f7e74;
  color: white;
}
.right_bottom_main{
  /*height:800px;*/
  background-color:rgba(255,255,255,0.9);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 5px;
  /*margin-bottom: 100px;*/
}


</style>
